.Calendar{
    /*height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.MonthView{
    display:grid;
    grid-template-columns: repeat(7,1fr);
    grid-template-rows: 70px repeat(5,1fr);
    grid-gap: 1px;
    color: #EE7D45 /*#3B58A2*/;
    width: 98%;
}

.DayOfMonth{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;

   /* background-color: #b4ffe0;*/
    align-items: center;
    border-left: 1px solid rgba(221,221,221,.6);
    border-bottom: 1px solid rgba(221,221,221,.6);
}

.DayOfMonth .divDay{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px;
    font-size: 20px;
    font-weight: bold;
}

.DayOfMonth .events{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: unset;
}
.DayOfMonth .events li{
    display: flex;
    justify-content: center;
    border: solid white 1px;
    color: black;


}

.DayOfWeek{
    /*background-color: #d2c2e5;*/
    border-left: 1px solid rgba(221,221,221,.6);
    border-bottom: 1px solid rgba(221,221,221,.6);
}

.DayOfWeek .Day{
    color: #3B58A2;
}

.ToDay{

}
.ToDay .Day{
    color: #7fd300 !important;
    font-weight: bold;
    font-size: 24px;
    /*background-color: #1100ff;*/
}
.WeekendDay{
    /*background-color: #ffd3f3;*/
}

.WeekendDay .Day{
    color:#E83B67;
}



.OtherMonth{

}
.OtherMonth .Day {
    color: gray;
}
/*                  Popup daily events*/
.popup-content{
    background: aquamarine;
    display: flex;
}
.popup-content .popup-arrow {
    color: aquamarine;
}
.popup-content .hidden-events{ /*array popup*/
    display: inline-grid;
}